<template>
  <div class="operateBtnList">
    <div class="moreBtnBox">
      <span
        v-if="operateControl.isShowMoreBtn(order)"
        @click.stop="emits('btnClickEvent', 'showMoreBtnList', order)"
        >更多</span
      >
      <div class="moreBtnList" v-if="order.moreMenuVisible == true">
        <ul>
          <li
            v-if="order.operateBtn.showExpressBtn"
            @click="emits('btnClickEvent', 'showExpress', order)"
          >
            查看物流
          </li>
          <li
            v-if="order.operateBtn.showDeleteOrderBtn"
            @click="emits('btnClickEvent', 'deleteOrder', order)"
          >
            删除订单
          </li>
        </ul>
      </div>
    </div>
    <div class="baseBtnList">
      <nut-button
        v-if="order.operateBtn.showTakeDeliveryBtn"
        type="default"
        @click="emits('btnClickEvent', 'takeDelivery', order)"
        >确认收货</nut-button
      >
      <nut-button
        v-if="order.operateBtn.showPayBtn"
        type="default"
        @click="emits('btnClickEvent', 'payOrder', order)"
        >去支付</nut-button
      >
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

// 方法
const emits = defineEmits(["btnClickEvent"]);

// 属性
const props = defineProps({
  order: {
    type: Object,
  },
});

// 按钮显示控制（0待付款 1待发货 2待收货 3已完成 4已取消）
const operateControl = {
  // 更多按钮
  isShowMoreBtn(order) {
    return order.operateBtn.showExpressBtn || order.operateBtn.showDeleteOrderBtn;
  },
};
</script>

<style lang="less" scoped>
.operateBtnList {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  :deep(.nut-popup) {
    margin-top: 28px;
    left: 5px;
  }
  :deep(.nut-popover-content) {
    font-size: 13px;
    margin-left: 2px;
  }
  .moreBtnBox {
    color: #aaa;
    position: relative;
    width: 120px;
    .moreBtnList {
      margin-top: 10px;
      position: absolute;
      left: -10px;
      ul {
        width: 100%;
        padding: 5px 10px;
        background: #fff;
        border: 1px solid #efefef;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        li {
          display: flex;
          align-items: center;
          color: #000;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
  .baseBtnList {
    .nut-button {
      height: 30px;
      margin-left: 5px;
      font-size: 12px;
      padding: 15px 15px;
      color: #000;
    }
  }
}
</style>